<script setup lang="ts">

import IconView from "@/components/IconView.vue"
import {useAudioPlayerStore, usePlayerDrawViewStore} from "@/stores";
const audioStore = useAudioPlayerStore()
const showDrawer = usePlayerDrawViewStore()
// const emit = defineEmits(['update:OpenPlaylist'])
const props = defineProps({
  themeDarkStyle:{
    required: false,
    default: false,
    type: Boolean
  }
})
const handlePlaylistOpen = () => {
  //emit('update:OpenPlaylist')
  showDrawer.show = true

}
</script>

<template>
  <div class="btn-queue">
    <IconView :text="audioStore.songList.length.toString()" @click="handlePlaylistOpen">
      <template #img v-if="themeDarkStyle">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11">
          <path fill="#fff" fill-rule="evenodd" d="M12.177 7.268V5.025a4.86 4.86 0 0 1 2.013-3.927.513.513 0 0 1 .71.105.495.495 0 0 1-.106.7 3.865 3.865 0 0 0-1.6 3.122V8.67a.494.494 0 0 1-.013.11c.008.072.012.145.012.22 0 1.105-.91 2-2.032 2-1.122 0-2.032-.895-2.032-2s.91-2 2.032-2c.37 0 .717.097 1.016.268zM.5 10h6.164a.5.5 0 1 1 0 1H.5a.5.5 0 0 1 0-1zm0-10h12.329a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1zm0 5h8.806a.5.5 0 1 1 0 1H.5a.5.5 0 0 1 0-1z"/>
        </svg>
      </template>
      <template #img v-else>
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11">
          <path fill="#333" fill-rule="evenodd" d="M12.177 7.268V5.025a4.86 4.86 0 0 1 2.013-3.927.513.513 0 0 1 .71.105.495.495 0 0 1-.106.7 3.865 3.865 0 0 0-1.6 3.122V8.67a.494.494 0 0 1-.013.11c.008.072.012.145.012.22 0 1.105-.91 2-2.032 2-1.122 0-2.032-.895-2.032-2s.91-2 2.032-2c.37 0 .717.097 1.016.268zM.5 10h6.164a.5.5 0 1 1 0 1H.5a.5.5 0 0 1 0-1zm0-10h12.329a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1zm0 5h8.806a.5.5 0 1 1 0 1H.5a.5.5 0 0 1 0-1z"/>
        </svg>
      </template>
    </IconView>
  </div>
</template>

<style scoped lang="scss">
.btn-queue{
  margin-left: 8px;
}
</style>